<template>
  <div class="form-group">
    <label class="control-label">LCD</label>
    <select class="form-control" v-model="topoIdOfLcd" @change.prevent="onLcdChange">
      <option v-for="option in lcdOptions" :value="option.value">{{option.text}}</option>
    </select>
  </div>
  <template v-if="showLcdMode">    
    <div class="form-group">
      <label class="control-label">{{$t('common.mode')}}</label>
      <select class="form-control" v-model="_modeId" number @change.prevent="onLcdModeChange">
        <option value="0">{{$t('common.default')}}</option>
        <option v-for="option in modes" :value="$index + 1">{{option.name}}</option>
      </select>
    </div> 
    <div class="form-group" v-show="areas.length > 0">
      <label class="control-label">{{$t('common.area')}}</label>
      <select class="form-control" v-model="_virtualTopoId" number @change.prevent="onLcdAreaChange">
        <option v-for="option in areas" :value="option.virtualTopoId">{{option.name}}</option>
      </select>
    </div>
    <button class="btn btn-default" @click.prevent="onSwitchLcdMode">
      {{$t('common.switchMode')}}
    </button>    
  </template>
</template>

<script>
import _ from 'lodash'
import ebus from 'libs/ebus.js'
import toast from 'libs/toast.js'
import msgbox from 'libs/msgbox.js'
import {printObj} from 'libs/utils.js'
import {mediaPhyApi} from 'share/server/api.js'
import * as actions from 'share/server/vuex/actions/multimedia.js'
import {devsOfLcd} from 'share/server/vuex/getters.js'
import {getMultiScreenOfLcd} from 'share/server/utils.js'

export default {
  props: {
    onChange: {
      type: Function,
      required: true
    }
  },
  vuex: {
    getters: {
      devsOfLcd,
      lcdTopoDev: (state) => state.lcd.topoDev,
      modes: (state) => state.lcd.modes,
      modeId: (state) => state.lcd.modeId,
      virtualTopoId: (state) => state.lcd.virtualTopoId,
    },
    actions
  },
  computed: {
    lcdOptions () {
      return _.map(this.devsOfLcd, (item) => {
        return {
          text: item.devName,
          value: item.topoId
        }
      })
    },
    topoIdOfLcd: {
      get () {
        if (this.lcdTopoDev.topoId < 0
          && this.lcdOptions.length > 0) {
          let topoDev = _.find(this.devsOfLcd, {topoId: this.lcdOptions[0].value})
          this.setLcdTopoDev(topoDev)
          this.getLcdCfg()
          this.updateLcdModes()
        }
        return this.lcdTopoDev.topoId
      },
      set (val) {
        let topoDev = _.find(this.devsOfLcd, {topoId: val})
        this.setLcdTopoDev(topoDev)
      }
    },
    _virtualTopoId: {
      get () {
        return this.virtualTopoId
      },
      set (val) {
        this.setLcdVTopoId(val)
      }
    },
    _modeId: {
      get () {
        return this.modeId
      },
      set (val) {
        this.setLcdModeId(val)
      }
    },
    areas () {
      if (this.modeId > 0) {
        let mode = this.modes[this.modeId - 1]
        return mode.areas
      } else {
        return []
      }
    },
    showLcdMode () {
      return this.modes.length > 0
    }
  },
  methods: {
    onChangeLcd () {
      this.getLcdCfg()
      this.onChange()
    },
    onSwitchLcdMode () {
      mediaPhyApi.setDevId(this.topoIdOfLcd)
      mediaPhyApi.setCfg({
        _info: {
          modeId: this.modeId
        }
      }).then(function(res) {
        if (res && res.data && res.data.code === 0) {
          toast.s(this, this.$t('common.success'), '')
        } else {
          toast.code(this, res.data)
        }          
      }.bind(this))
    },
    onLcdAreaChange () {
      this.onChangeLcd()
    },
    onLcdModeChange () {
      this._virtualTopoId = -1

      if (this.modeId > 0) {
        let mode = this.modes[this.modeId - 1]
        if (mode.areas.length > 0) {
          this._virtualTopoId = mode.areas[0].virtualTopoId
        }
      }
      this.onChangeLcd()
    },
    onLcdChange () {
      this._modeId = 0
      this._virtualTopoId = -1
      this.updateLcdModes()
      this.onChangeLcd()
    }
  }
}
</script>

<style>
</style>